<template>
  <div class="app">
    <MyHeader background="hotpink" title="购物车案例"></MyHeader>
    <MyGoods v-for='item in cartList'
             :key='item.id'
             :cart='item'></MyGoods>
    <MyFooter :list = 'cartList'></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'
export default {
  data(){
    return {
       cartList: []
    }
  },
components:{
  MyHeader,
  MyGoods,
   MyFooter
},
created(){
  this.$axios.get(
   "/api/cart"
  ).then(res => {
      console.log(res);
      this.cartList = res.data.list
    })
}
}
</script>

<style lang='less' scoped>
.app {
  padding-top:45px;
  padding-bottom: 50px;
}
</style>